<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>

    <script src="./../vue/vue.js"></script>

    <style>

        *{
            padding: 0;
            margin: 0;
        }

        a{
            text-decoration: none;
        }

        .page{
            display: inline-block;
            position: relative;
            margin: 0 auto;
            width: 187px;
            height: 333px;
            border: 1px solid gray;
        }

        .header{
            height: 20px;
            border: 1px solid red;
        }

        .header ul li{
            display: inline-block;
            padding: 0 5px;
        }

        .header ul li a{
            line-height: 20px;
            font: 400;
            color: #555;
        }

        .content{
            position: relative;
            width: 100%;
            height: 313px;
        }

    </style>
</head>
<body>

    <!-- 
        组件基础
            1、 基本示例
            2、 组件的复用
                    data 必须是函数，返回一个对象，不能直接是对象，否则，数据会公用
            3、组件的组织
                使用 Vue.component("component-name",{
                    data: function(){
                        return {

                        }
                    },
                    template: ""
                })

            4、通过props 向子组件传递数据   组件穿参数，使用 - 隔开驼峰形势的参数
            
            5、单个根节点,    组件可以使用v-if 返回单个节点

            6、监听子组件事件
                1、子组件使用  $emit() 向组件外部传递事件
                2、子组件传递事件必须使用 - 连接参数 ，不能使用驼峰形式
                3、可以使用 $emit("funciton-name",params) 这种形式传递参数
                4、组件上使用 v-model v-model实现的是双向数据绑定。  
            7、插槽
            8、动态组件 使用 componet is 方法指定组件
                <componet is="component-name">

            9、解析组件时应该注意的点
                在一些元素中，比如 ul ol table select中元素只能是 对应的规定的元素。所以，这个时候使用组件，可以使用 is 属性来变通
    -->

    <div id="app">

        <!-- 1、基础案例 -->
        <div>
            <always-add-button :title="componentTitle" show-button="1" @over-five-times-event="overFiveTimesEvent"></always-add-button>
            <always-add-button title="aaa"></always-add-button>

            <div>
                <custom-input v-model="inputValue">可以在插槽中添加slot 插槽。在组件标签内部的元素会被渲染到这里<div>{{ inputValue }}</div></custom-input>
            </div>


            <div class="page">
                <!-- header -->
                <div class="header">
                    <ul>
                        <li><a href="#" @click.prevent="clickTabButton(0)">首页</a></li>
                        <li><a href="#" @click.prevent="clickTabButton(1)">阅读</a></li>
                        <li><a href="#" @click.prevent="clickTabButton(2)">设置</a></li>
                    </ul>
                </div>
                <div class="content">
                    <component :is="componenttag"></component>
                </div>
            </div>

            
        </div>

    </div>

    <script>
        
        Vue.component("custom-input",{
            props: ["value"],
            template: `
            <div>
                <div>这是一个input组件</div>
                <input type="text" :value="value" @input="onInputText">
                <div><slot></slot></div>
            </div>
            `,
            methods:{
                onInputText(event){
                    this.$emit("input",event.target.value)
                }
            }

        })

        Vue.component("always-add-button",{
            props: ["title","showButton"],
            data: function(){
                return {
                    times: 0
                }
            },
            template: 
            `
            <div v-if="showButton">
                <div>{{ title }}</div>
                <button @click="clickTheButton">这里显示点击次数{{times}}</button>

                
            </div>
            <div v-else>hhha</div>
            `,
            methods: {
                clickTheButton(){
                    this.times++

                    if(this.times>5){
                        this.$emit('over-five-times-event', [this.times,"测试"])
                    }
                },

                
            }
        })


        Vue.component("page-0",{
            template: `
            <div>page-0</div>
            `
        })
        Vue.component("page-1",{
            template: `
            <div>page-1</div>
            `
        })
        Vue.component("page-2",{
            template: `
            <div>page-2</div>
            `
        })

        let vm = new Vue({
            el: "#app",
            data: { 
                componentTitle: "这是第一个组件",
                inputValue:"input",
                page: 0,
            },
            computed: {
                componenttag(){
                    return "page-"+this.page
                }
            },
            methods: {
                overFiveTimesEvent(event){
                    console.log("overFiveTiemsEvent",event)
                },

                clickTabButton(e){
                    this.page = e
                }
            }

        })
    </script>
</body>
</html>